When working on a WooCommerce add-on or a custom solution, you will sometimes have to add some WooCommerce custom product fields so that you can save additional data for each product. In this tutorial we will go through adding fields to existing product tabs and also create a new product tab.
Adding WooCommerce Custom Product Fields
When you want to add a custom product field inside a WooCommerce metabox, you can add it creating a custom input. That is alright and you can work with that. But, creating custom product fields can be a cumbersome task if you want to add multiple fields.
Creating your own custom markup for the product fields is only fine when you are creating a custom layout in the metabox. But, if you are just going to use regular inputs, then use the WooCommerce product fields functions. It will be much easier for you to create many product fields and you will also the WooCommerce API for that.
Let’s learn about those functions.
Text Field
The text input is the basic input field that can receive a different type such as text, number, date etc. Everything that HTML5 does support, you can add there. But, don’t use it if you are going to add a radio input or a checkbox. There are two other functions for that. The function name for adding the text input as a WooCommerce product field is woocommerce_wp_text_input.
Checkbox Field
The checkbox input receives some other parameters and it’s created with the function woocommerce_wp_checkbox. The parameter cbvalue is the value which will make the checkbox checked. This value will be matched againts the parameter value. If they have the same value, the checkbox field will be checked.
Radio Field
To create the radio input, we will need to use the function woocommerce_wp_radio. To create various radio options, you will need to use the parameter options. This will be an associative array where the key will be the value of the input and the value will be text of that input.
Textarea Field
The textarea input is done with the function woocommerce_wp_textarea_input. The parameters are almost the same as for the text input but we can also set the rows and columns in parameters rows and cols.
Select Field
The select input has something similar with the radio input. The parameter options will be used to create all the options. The function that will create the select field is woocommerce_wp_select.
Hidden field
The hidden field can be used for some data that will be used internally and will not be needed to change by the user.
Default Product Tabs
Now that we know all the functions that we can use to add our own WooCommerce custom product fields, let’s learn about the default product tabs. There are 7 default tabs:
- General
- Inventory
- Shipping
- Linked Products
- Attributes
- Variations
- Advanced
Some of those tabs will be only shown for a specific type of the product. In each of those tabs we can hook our own function to add our custom product fields. Here are the hooks we can use:
General Tab
woocommerce_product_options_pricingwoocommerce_product_options_downloadswoocommerce_product_options_taxwoocommerce_product_options_general_product_data
Inventory Tab
woocommerce_product_options_skuwoocommerce_product_options_stockwoocommerce_product_options_stock_fieldswoocommerce_product_options_stock_statuswoocommerce_product_options_sold_individuallywoocommerce_product_options_inventory_product_data
Shipping Tab
woocommerce_product_options_dimensionswoocommerce_product_options_shipping
Linked Products Tab
woocommerce_product_options_related
Attributes
woocommerce_product_options_attributes
Variations
woocommerce_variable_product_bulk_edit_actions
Advanced
woocommerce_product_options_reviewswoocommerce_product_options_advanced
Example
Here is an example of the general tab and some WooCommerce custom product fields.
Custom Product Tab
Some add-ons or solutions will also require additional product tabs. We can add custom product tabs using a filter or an action:
- Filter:
woocommerce_product_data_tabs - Action:
woocommerce_product_write_panel_tabs
If we are going to use the action, then we will need to write the whole markup ourselves. If we are going to use the filter, we just need to extend the existing tab array with our new one. We also need to add the panel that we will show when our tab is clicked.
I will now show you both ways how to add the tabs.
Custom Tab with Filter
When adding a tab using the filter, you need to define the label, target and class. The target will be the attribute id of our panel.
Custom Tab with Action
When defining our custom tab with the action, then we need to create the whole markup. This means adding a li item and also the a with the target as the value in href.
Custom Panel
Since we have our custom tab defined, we also need to add a panel that will show up when clicking our tab. We are adding a custom panel by hooking into woocommerce_product_data_panels.
Be sure to add the same value in the attribute id that you have defined as the target.
Saving WooCommerce Custom Product Fields
The last part that we also need to define is how to save our product field. To save the product fields, you need to use the action woocommerce_process_product_meta.
We are just getting the WC_Product object and then update/add a new metadata. After that, we are calling the method save() to save every new change.
Conclusion
Since WooCommerce uses the WordPress Plugin API, you can customize every possible detail. To add WooCommerce custom product fields, you can use various actions and filters to achieve it. In this tutorial, you have learned a lot about custom product fields and actions/filter that you can use to do that.
If you have ever created your own custom product fields, please do share your experience in the comments below.
If you would like to learn more about WooCommerce, you can check out my eBook:
Thanks a lot! This was very helpful for a project I’m working on!
I am really glad it helps! 🙂
This is the best guide, and I’ve looked through tens of those. Thank you!
How come there’s no mention of this in woocommerce docs? Or at least I couldn’t find it 😛
Hi Matt, I am really glad it’s helpful to you. I am not sure if that’s somewhere in the WooCommerce docs.
It is such a big plugin so it might be hard to cover everything. I usually browse the core code of the plugin as I find it really good to learn how something works:)
how to add a file upload field in product new setting panel
To add an upload field you would need to add a file input
<input type="file" name="custom_file" />. After that, you would need to check on the backend part with the global$_FILESif that input was filled. After that you will have to process the upload. I have an article on uploading files through AJAX. You may find the upload code helpful there: https://www.ibenic.com/wordpress-file-upload-with-ajax/Hi, I wrote this code in my theme functions, and dnot work
add_action( ‘woocommerce_product_options_general_product_data’, ‘my_custom_capacidad_field’ );
function my_custom_capacidad_field() {
$field = array(
‘id’ => ‘capacidad’,
‘placeholder’ => ‘capacidad’,
‘label’ => __(‘Capacidad’, ‘woocommerce’)
);
woocommerce_wp_text_input( $field );
}
add_action( ‘woocommerce_process_product_meta’, ‘save_custom_field’ );
function save_custom_field( $post_id ) {
$custom_field_value = isset( $_POST[‘capacidad’] ) ? $_POST[‘capacidad’] : ”;
$product = wc_get_product( $post_id );
$product->update_meta_data( ‘capacidad’, $custom_field_value );
$product->save();
}
Are there any errors? What doesn’t work? More explanation of what you’ve tried to debug and what is the actual error would help a lot.
I want that the field show in the general product data, and this not display anything.
I put the code in the my theme functions.php. Is it correct?
Dont show visible errors
Hi Rita, putting the code in the functions.php should be correct, although I would recommend separating such functionality into a plugin if you plan to use it even after you change the theme.
I also don’t see why this would not work. Do you have the
WP_DEBUGconstant inwp-config.phpset toTRUE?define( 'WP_DEBUG', true);Maybe it will show you some hidden errors.Which file do you make the edits in?
You can add that as a new separate plugin or in your own plugin’s files. If you want to add that in a theme (which I don’t recommend) then you can add that inside the
functions.phpor in a separate file (recommended) and then include itfunctions.php.Hi Igor, any idea on how to make the tab content editable from the Products admin in the dashboard? I want to have a textfield input like “Product Short Description” where it is using native WordPress post text box. How to do that?
My case is I create a new tab for which I name it “Table of Content”, and I want this tab has similar function like “Description” tab. That means, I could write something/content for this tab using HTML text box for WordPress.
Hi Ahmad,
if you want the textarea field, you can check WooCommerce function for it:
https://docs.woocommerce.com/wc-apidocs/source-function-woocommerce_wp_text_input.html#14-79
If you would like to use WP Editor, then you would need to create your own field and using https://developer.wordpress.org/reference/functions/wp_editor/ to add the WP Editor.
Thanks for this, it’s helped me figure out a couple things I’ve had on my todo list for a while now 🙂
Question about the “my_custom_input” ID in tab_panel.php on line 11:
I have some pre-existing metaboxes with ID’s that start with an underline, so I’m trying to remove the metaboxes and use a product data tab instead.
But it seems this code doesn’t save the input if I change the ID to _custom_input, for instance. It works fine with a letter starting the id name.
Any idea why that would be happening?
Happy to help, Robert 🙂
Amazing post! Just what I needed.. the Woo Codex just doesn’t clearly lay things out like this.. or a least I couldn’t find it. For those looking for a great companion to this post for Variable Product custom fields I recommend this one. http://www.remicorson.com/woocommerce-custom-fields-for-variations/
Hi..
I developed my website to sell video files. In the single product page I list all files of product that buyers can download them. I want to add some options same as duration and size of each file in backend. and then show them in single product page. How can I do that?
Hi Farzin, you would have to check the code where WooCommerce adds the files option. Then check if there are any hooks which you could use to add new fields.
How to display a custom field on a frontend
Hi Predrag, you can check the product template here: https://github.com/woocommerce/woocommerce/blob/master/templates/content-single-product.php for various hooks. I would then recommend viewing how a function is used that is hooked on some of those actions to see how you can retrieve the product or product ID and then use that to retrieve the field value.
is there a way to add custome field in additional information tab for variable products. I want to create field Volume in litres under dimmensions for every variation separate.
I allready create custom field for every variations but can make it to show in the tab. Thank you very much
When working with variations, you’ll need to show the field under each variation because only then you have access to the loop and all variation attributes you need to build a valid field name to save.
If you are thinking about Additional Information tab on the front end for variations, you would need to add such field inside of each variations, and then on the front end go through each variation, check if such information is available in postmeta and show it.
Hello,
I too want some help on adding custom fields in additional information tab for all products.
How can I do this?
Hello,
What would be need to add a “Brands” field to product pages for rich snippets ?
Thanks
Hi Peter, what do you mean by rich snippets? You would like to use the WP Editor for entering data?
If so, I recommend you to check this function: https://developer.wordpress.org/reference/functions/wp_editor/ to add the WP Editor.
awesome tutorials , i am not developer but i need add in some product custom text, price range example ( 30-70/pieces) another is quantity,
(100 pcs /Min Order)
position should be after price
please if someone have idea how should i fix this issue step by step i grateful to you
thank you very much ,
Hi Rovin, you request is a complex one and for this you would need to hire a developer since you’re not one to do it for you.
But if you are trying to become a developer, here is an interesting guide on hooks that you can use to show: https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/ and then I would recommend you to read a few of free WooCommerce add-on plugins that are used for something like this.
Hi.
How can I set a default value for NUMBER field?
So when I start editing product the value is already in my custom field and when I save the product it is recorded to DB.
And when if I want to change this default value then the changed one is recorded to DB.
Thanks.
Thanks for this information. The question is, Where to put those codes so that it may function?
You can put them in a separate plugin or in the theme functions.php. If you’re interested into putting that in a separate plugin I would check this guide: https://developer.wordpress.org/plugins/plugin-basics/#getting-started
Hello Igor,
do you know how you can prevent Woocommerce from adding meta fields to ALL products when you just set a value for one particular product? To clarify: I have added several custom fields like brand, mpn etc, and when I enter a value for one product, ALL products get the meta data applied, with empty values. But this results in a huge wp_postmeta table in the database…
Thanks!
Hi Maria, that should not be happening at all. Are you maybe querying the products when updating or are you using the same update process as I have here. Please share your code that saves the data, you can post a link to a gist or similar.
Hi Igor,
thank you for your reply! I am using a code based on this https://gist.github.com/bekarice/aebd817dfe60c22c95f5#file-wc-add-shop-loop-php
To clarify: It is not that all products get the meta fields when I enter a value for one product in the backend(on the single product page), but when I use the native Woocommerce product importer and upload a csv with all products, and some of them have a value for a meta field and others don’t, all products will still receive this field – just with empty values…
Oh, I see. That’s the issue with the WooCommerce Product Importer, they get all the meta from CSV and assign them to all products regardless if they have meta value or not.
I have checked their importer (latest version of WC) and I found an filter
woocommerce_product_import_process_item_data. You could use this filter and then check the$datathat is passed there. I have created a simple function but have not tested it, so please handle with care: https://gist.github.com/igorbenic/219637350cd593f8e12345c9918466b9 🙂I am getting an error and am unable to save my functions.php when I try to add the code…this is the error message:
syntax error, unexpected ‘continue’ (T_CONTINUE)
Hi Maria, can you check if the ‘continue;’ is inside of a foreach loop or elsewhere?